import React,{useEffect} from 'react'
import {get_list,check_DATA} from "../../api/index"
import { Tabs  } from 'react-vant';
import Son from '../../compontes/Son';
import {useDispatch,useSelector} from "react-redux"
import {RootDispatch,anyAction} from "../../untils/index"
type Props = {
  
}

const Home = (props: Props) => {
  // 检测仓库dispatch
  const dispatch:RootDispatch=useDispatch()
  useEffect(()=>{
  dispatch(get_list())
  },[dispatch])
  const data=useSelector((state:anyAction)=>{
    return state.reducer.data
  })
  const childrenData=useSelector((state:anyAction)=>{
    return state.reducer.childrenData
  })
  console.log( data);
  console.log( childrenData);
  
  let tab={childrenData}
  return (
    <div>
      
         <Tabs  onClickTab={(e)=>{dispatch(check_DATA(e.name)) }}>
         {data&&data.map((item:anyAction,index:number) => (
           <Tabs.TabPane key={index} title={item.title} >
                   <Son {...tab}></Son>
           </Tabs.TabPane>
         ))}
       </Tabs>
      
    </div>
  )
}

export default Home